<template>
    <div>
      <a-card title="异常订单管理">
        <ProTable
          :columns="columns"
          :request="fetchOrderList"
          row-key="id"
          :pagination="pagination"
          :action-ref="setActionRef"
        >

          <template #operation="{ record }">
            <a-button type="text" @click="handleViewDetail(record)">查看详情</a-button>
            <a-button type="text" @click="handleProcess(record)">处理</a-button>
          </template>
        </ProTable>
      </a-card>
  
      <!-- 订单详情模态框 -->
      <a-modal v-model:visible="detailModalVisible" title="订单详情" @cancel="handleDetailModalCancel">
        <a-descriptions bordered :column="1">
          <a-descriptions-item label="订单号">{{ detailData?.serviceNo }}</a-descriptions-item>
          <a-descriptions-item label="服务类型">
            {{ detailData?.productType === 1 ? '保洁' : 
              detailData?.productType === 2 ? '搬家' : 
              detailData?.productType === 3 ? '保养' : 
              detailData?.productType === 4 ? '维修' : 
              '未知' }}
          </a-descriptions-item>
          <a-descriptions-item label="处理状态">{{ detailData?.handleStatus === 1 ? '未处理' : '已处理' }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ detailData?.createTime }}</a-descriptions-item>
          <a-descriptions-item label="预约时间">{{ detailData?.reservationTime }}</a-descriptions-item>
          <a-descriptions-item label="服务名称">{{ detailData?.serviceProductName }}</a-descriptions-item>
          <a-descriptions-item label="服务人员">{{ detailData?.serviceUserName }}</a-descriptions-item>
          <a-descriptions-item label="派单地址">{{ detailData?.contactProvince }} {{ detailData.contactCity }} {{ detailData.contactCounty }} {{ detailData.contactAddress }}</a-descriptions-item>
          <a-descriptions-item label="需求记录">{{ detailData?.requirementRecord }}</a-descriptions-item>
          <a-descriptions-item label="售后原因">{{ detailData?.afterSalesReason }}</a-descriptions-item>
          <a-descriptions-item label="结束原因">{{ detailData?.endReason }}</a-descriptions-item>
          <a-descriptions-item label="上传凭证">{{ detailData?.file }}</a-descriptions-item>
        </a-descriptions>
      </a-modal>
  
      <!-- 处理订单模态框 -->
      <a-modal v-model:visible="processModalVisible" title="处理订单" @ok="handleProcessModalOk" @cancel="handleProcessModalCancel">
        <a-form :model="processForm">
          <a-form-item label="处理建议">
            <a-input v-model="processForm.handleProposal" />
          </a-form-item>
          <a-form-item label="处理结果">
            <a-input v-model="processForm.handleResult" />
          </a-form-item>
          <a-form-item label="是否返工">
            <a-select v-model="processForm.reworkStatus">
              <a-option value="0">是</a-option>
              <a-option value="1">否</a-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { getDemandAbnormalList, getDemandAbnormalDetail, handleDemandAbnormal } from '@/api/demandAbnormal';
  import { Message } from '@arco-design/web-vue';
  
  const detailModalVisible = ref(false);
  const processModalVisible = ref(false);
  const detailData = ref({});
  const processForm = ref({
    id: null,
    handleProposal: '',
    handleResult: '',
    reworkStatus: '1',
  });
  
  const columns = [
    { title: '订单号', dataIndex: 'serviceNo', key: 'serviceNo' },
    { title: '服务类型', dataIndex: 'productType', key: 'productType', hiddenInSearch:true, valueEnum:{
         1: { text: '保洁' },
        2: { text: '搬家' },
        3: { text: '保养' },
        4: { text: '维修' },
} },
    { title: '处理状态', dataIndex: 'handleStatus', key: 'handleStatus', valueEnum:{
      1: { text: '未处理' },
      2: { text: '已处理' },
    },
     hiddenInSearch:true },
    { title: '创建时间', dataIndex: 'createTime', key: 'createTime' , hiddenInSearch:true},
    { title: '操作', key: 'operation', slotName: 'operation' , hiddenInSearch:true },
  ];
  
  const pagination = ref({
    pageSize: 10,
    total: 0,
    showTotal: total => `共 ${total} 条`,
  });
  
  const actionRef = ref();
  
  const fetchOrderList = async (params) => {
    try {
      const response = await getDemandAbnormalList({ page: params.current, size: params.pageSize, condition: {} });
      if (response) {
        return {
          success: true,
          data: response.list,
          total: response.total,
        };
      } else {
        return {
          success: false,
          data: [],
          total: 0,
        };
      }
    } catch (error) {
      console.log(error,'error')
      Message.error('获取异常订单列表失败');
      return {
        success: false,
        data: [],
        total: 0,
      };
    }
  };
  
  const setActionRef = (ref) => {
    actionRef.value = ref;
  };
  
  const handleAddOrder = () => {
    // 新增订单逻辑
  };
  
    const handleViewDetail = async (record) => {
    try {
      const response = await getDemandAbnormalDetail({ id: record.id });
      if (response) {
        detailData.value = response;
        detailModalVisible.value = true;
      }
    } catch (error) {
      Message.error('获取订单详情失败');
    }
  };
  
  const handleDetailModalCancel = () => {
    detailModalVisible.value = false;
  };
  
  const handleProcess = (record) => {
    processForm.value = {
      id: record.id,
      handleProposal: '',
      handleResult: '',
      reworkStatus: '1',
    };
    processModalVisible.value = true;
  };
  
  const handleProcessModalOk = async () => {
    try {
      await handleDemandAbnormal(processForm.value);
      Message.success('处理订单成功');
      processModalVisible.value = false;
      actionRef.value.reload();
    } catch (error) {
      Message.error('处理订单失败');
    }
  };
  
  const handleProcessModalCancel = () => {
    processModalVisible.value = false;
  };
  
  onMounted(() => {
    actionRef.value.reload();
  });
  </script>
  
  <style scoped>
  /* 样式可以根据需要进行调整 */
  </style>